body{
	&.pa-overflow-hidden{
		overflow: hidden;
	}
}
// HELPER
#pa-helper-overlay{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
	ul{
	    background: $primary-color;
	    color: $primary-text-color;
	    min-width: 170px;
	    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.3);
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    position: fixed;
	    z-index: 9999;
	    display: block;

	    li{
	    	&.label{
	    		padding: 10px;
	    		color: $white;
	    		text-transform: uppercase;
    		    display: inline-block;
			    width: 100%;
			    text-align: left;
	    	}
	    	padding: 5px 10px 5px 0;
	    	&:not(last-child) {
	    		border-bottom: 1px solid $primary-text-color;
	    	}
	    	transition: all 0.3s;
	    	-moz-transition: all 0.3s;
	    	-webkit-transition: all 0.3s;
	    	-o-transition: all 0.3s;
	    	-ms-transition: all 0.3s;
	    	i{
	    		padding: 0 8px;
	    	}

	    	&:hover{
	    		cursor: pointer;
	    		color: $primary-color;
	    		background-color: $white;
	    	}
	    }
	}
}
// END HELPER
// START BUTTONS
.pa-transition{
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}
.pa-button{
	@extend .pa-transition;
	background-color: #7bcd2d;
	color: $main_color;
	font-size: $main_fontsize;

	border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    text-decoration: none !important;
    border-radius: 3px;

    i{
    	padding: 0 10px 0 0;
    }
}

.pa-button-info{
	@extend .pa-button;
	background-color: $info_bg;

	&:hover{
		background-color: $info_bg_hover;
	}
}

.pa-button-success{
	@extend .pa-button;
	background-color: $success_bg;

	&:hover{
		background-color: $success_bg_hover;
	}
}

.pa-button-warning{
	@extend .pa-button;
	background-color: $warning_bg;

	&:hover{
		background-color: $warning_bg_hover;
	}
}
// END BUTTONS

// ROWS && COLUMNS
.pa-sortable-placeholder{
	color: white;
	visibility: visible !important;
	height: auto;
	max-height: 50px;
	min-height: 50px;
  	background: repeating-linear-gradient(
	    135deg,
	    #d4d4d4,
	    #d4d4d4 2px,
	    #fff 2px,
	    #fff 4px
  	);
}

.pa-row-container{
	&.row-fade-in{
		-webkit-animation-duration: 0.75s;
	    animation-duration: 0.75s;
	    -webkit-animation-fill-mode: both;
	    animation-fill-mode: both;
	    -webkit-animation-name: rowFadeIn;
	    animation-name: rowFadeIn;
	}

    &:hover{
    	> .pa-row-column-control{
    		.pa-actions-hidden{
    			opacity: 1;
    		}
    	}
    }

	> .pa-element-wrapper{
		background-color: $row_background;
		border: $column_border;
	    padding: 10px 15px;
	    margin-bottom: 20px;
	}

	.pa-set-column{
		background-image: url('./images/1.gif');
	    background-position: center center;
	    background-repeat: no-repeat;
	    display: none;
	    border: none;
	    width: 30px;
	    height: 25px;
	    background-color: transparent;
	    cursor: pointer;
		.pa-edit-column-num{
			opacity: 0;
		    background-position: center center;
		    background-repeat: no-repeat;
		    display: none;
		    border: none;
		    width: 30px;
		    height: 25px;
		    background-color: transparent;
		    cursor: pointer;
		    text-indent: -9999px;
		    border: 1px solid #e9e7e7;
		    border-bottom: none;

		    &:hover{
		    	background-color: #eeeeee;
		    }
			&[data-columns="1"] {
				background-image: url('./images/1.gif');
			}
			&[data-columns="2"] {
				background-image: url('./images/2.gif');
			}
			&[data-columns="3"] {
				background-image: url('./images/3.gif');
			}
			&[data-columns="4"] {
				background-image: url('./images/4.gif');
			}
			&[data-columns="2-8-2"] {
				background-image: url('./images/2_8_2.gif');
			}
			&[data-columns="4-8"] {
				background-image: url('./images/4_8.gif');
			}
			&[data-columns="8-4"] {
				background-image: url('./images/8_4.gif');
			}
		}
	    &:hover{
	    	width: auto !important;
	    	border: none !important;
	    	background-image: none;
	    	.pa-edit-column-num{
	    		opacity: 1;
	    		display: inline-block;
	    		float: right;
	    		margin-right: 2px !important;
	    		&:first-child{
	    			margin-right: 0px !important;
	    		}
	    	}
	    }
	}

	.pa-row-column-control{
		position: relative;
		list-style: none;
		margin: 0;
	    display: inline-block;
	    float: left;
	    width: 100%;
	    text-align: center;
	    padding: 5px 0;

	    .pa-actions-hidden{
	    	opacity: 0;
		    list-style: none;
		    margin: 0;
		    padding: 0;
		    position: absolute;
		    left: 50%;
		    z-index: 11;
		    left: 50%;
		    top: -15px;
		    transform: translateX(-50%);
		    transition: all 0.3s;
		    -moz-transition: all 0.3s;
		    -ms-transition: all 0.3s;
		    -webkit-transition: all 0.3s;
		    -o-transition: all 0.3s;
			li {
				display: inline-block;
				float: left;
			}
			a {
				display: block;
				width: 20px;
			}
	    }
	}

	.pa-column-container{
		padding: 10px 5px 10px;
		background-color: $colum_empty_background;
		border: $column_border;
		height: auto;
		padding: 20px 10px 10px 10px;
		min-height: 50px;
		&.empty-element{
			min-height: 25px;
			padding: 30px 0;
		}

		.pa-element-content:not(.pa_row){
			box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);
			text-align: left;
			background-color: #fff;
			margin-bottom: 10px;

		    &.pa-ui-placeholder{
		    	box-shadow: none;
		    	:after{
		    		height: 100%;
				    width: 100%;
				    position: absolute;
				    content: '';
				    top: 0px;
				    left: 0px;
				    background: rgba(255,255,255,0.25);
				    border-radius: 2px;
				    border: 1px dashed #42BCE2 !important;
				    color: rgba(0,0,0,0.05);
				    font-weight: bold;
				    font-size: 1.2em;
				    display: flex !important;
				    align-items: center !important;
				    justify-content: center !important;
				    line-height: inherit;
				    overflow: hidden;
		    	}
		    	.element-item{
		    		opacity: 0;
		    	}
		    	.element-controls{
		    		display: none;
		    	}
		    }
			.element-item{
				margin: 0 5px;
			}
		}
		.pa-element-wrapper{
			padding: 5px 0px;
			background-color: $ele_background;
			p{
				font-size: 10px;
			}
			.pa-row{
				margin: 0;
			}
		}
	}

	>.pa-controls{
		a,span{
			display: inline-block;
		    border: $column_border;
		    border-bottom: none;
		    width: 30px;
		    height: 25px;
		    vertical-align: top;
		    text-align: center;
		    font-size: 15px;
		}
	}

	.pa-resizing-width{
		position: absolute;
		text-align: center;
		margin-bottom: 10px;
		top: 15px;
		right: 0;
		left: 0;
		bottom: 0;

		.width{
		    display: inline-block;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		}
	}
	.pa-controls{
		overflow: hidden;

		a{
		    padding: 5px;
		    font-size: 14px;
		    display: inline-block;
		    line-height: 1;
		    color: hsla(0, 7%, 24%, 0.84);
		    background-color: $icon_background;
		    border: $column_border;
		    border-bottom: none;
		    transition: all 0.3s;
		    -moz-transition: all 0.3s;
		    -webkit-transition: all 0.3s;
		    -ms-transition: all 0.3s;
		    -o-transition: all 0.3s;
		    &:hover{
		    	background-color: $icon_background_hover;
		    	color: $white_color;
		    	cursor: pointer;
		    }

		    &.pa-reorder{
		    	&:hover{
		    		cursor: move;
		    	}
		    }

		    &.pa-clone,
		    &.pa-add{
		    	&:hover{
		    		cursor: copy;
		    	}
		    }

		    &.pa-delete{
		    	&:hover{
		    		cursor: unset;
		    	}
		    }
		}
	}

	.pa-column{
		margin: 10px 0;
		height: 100%;
		z-index: 999;
		&.resizing{
			> .pa-element-wrapper{
				.pa-element-content{
				    visibility: hidden;
    				opacity: 0;
				}
			}
		}
		>.pa-controls{
		    position: absolute;
		    top: -10px;
		    background-color: transparent;
		    right: 0;
		    left: 0;
		    text-align: center;

		    &.bottom{
		    	top: auto;
		    	bottom: -8px;
		    }
		    a{
		    	background-color: $info_bg;
		    	color: $white_color;
		    	border-radius: 50%;
		    	font-size: 10px;
		    	&:hover{
		    		background-color: $info_bg_hover;
		    	}
		    }
		}
	}

	.pa-element-content:not(.pa_row){
		position: relative;
		> .pa-controls{
			position: absolute;
			opacity: 0;
		    z-index: 1004;
		    top: 50%;
		    left: 50%;
		    background-color: $info_bg;
		    border: 0px solid transparent;
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		    -o-transform: translate(-50%, -50%);
		    transform: translate(-50%, -50%);
		    border-top-right-radius: 3px;
		    border-top-left-radius: 3px;
		    border-bottom-right-radius: 3px;
		    border-bottom-left-radius: 3px;

		    a{
		    	color: $white_color;
		    	background-color: $info_bg;
		    	border: none;
		    	margin: 0;

			    &:hover{
			    	background-color: $info_bg_hover;
			    }

			    &.pa-delete{
			    	background-color: $warning_bg;
			    	&:hover{
			    		background-color: $warning_bg_hover;
			    	}
			    }
		    }
		}

		&:hover{
			.pa-controls{
				opacity: 1;
			}
		}

		&:hover{
			&:before{
			    content: '';
			    position: absolute;
			    right: 0;
			    left: 0;
			    bottom: 0;
			    top: 0;
			    background-color: rgba(171, 214, 224, 0.56);
			    opacity: 0.8;
			}
		}
	}
}
#pa-elements-list{
	.tab-content{
		overflow: hidden;
		.element-item{
			line-height: 1;
		}
	}
	#search-text{
	    float: right;
	    max-width: 250px;
	    margin-right: 20px;
	    padding: 5px;
	}
	.modal-header{
		.close{
			margin-top: 5px;
		}
	}
}
#pa-content{
	margin: 0 auto;
	> .pa-element-content{
		&.ui-sortable-helper{
			background-color: #fff;
			overflow: hidden;
			.pa-controls{
				display: none;
			}
			.pa-element-wrapper{
			    padding: 10px 0;
    			background-color: #fff;
    			.element-item{
    				margin-bottom: 0;
    			}
			}
		}
	}

	&[data-screen="medium-screen"] {
		width: 1024px;
	}
	&[data-screen="tablet-screen"] {
		width: 480px;
	}
	&[data-screen="mobile-screen"] {
		width: 320px;
	}
}
#pa-elements-list,
.pa-element-content{
	.element-item{
		color: #666;
		display: block;
		padding: 8px 10px;
	    background-color: hsla(0,0%,62%,.12);
	    overflow: hidden;
	    margin: 0px -10px 10px -8px;
		i{
			font-size: 30px;
			color: #06b7f0;
		    display: block;
			float: left;
			margin-right: 8px;
		}
		span{
			vertical-align: top;
			font-size: 12px;
			font-weight: 600;
			display: block;
		}
		code{
		    display: block;
		    float: left;
		    padding: 3px 0;
		    font-size: 10px;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;
		    max-width: 90%;
		    width: auto;
		}
	}
}
#pa-elements-list {
	.element-item {
		code{
		    max-width: 70%;
		}
	}
}
// Footer
#pa-footer{
	.pa-buttons{
		padding: 30px 20px;
		font-size: $lg_fontsize;
		text-align: center;
		border: $dashed_border;

		&:hover,
		&.drag-over{
			border: $dashed_border_hover;
		}

		.pa-button{
			padding: 10px 20px;
			color: $white_color;
		}
	}
}

.pa-layout-onion{
	position: relative;
	div{
		position: relative;
		padding: 50px;
		border: 1px solid #eee;

		&.content{
			padding: 10px;
		}

		&.margin{
			&:before{
				position: absolute;
			    content: 'Margin';
			    font-size: 10px;
			    top: 15px;
			    left: 10px;
			    color: rgba(119, 119, 119, 0.4);
			}
		}
		&.border{
			background-color: #ddd;
			&:before{
				position: absolute;
			    content: 'Border';
			    font-size: 10px;
			    top: 15px;
			    left: 10px;
			    color: rgba(119, 119, 119, 0.4);
			}
		}
		&.padding{
			background-color: #efefef;
			&:before{
				position: absolute;
			    content: 'Padding';
			    font-size: 10px;
			    top: 15px;
			    left: 10px;
			    color: rgba(119, 119, 119, 0.4);
			}
		}
		&.content{
			background-color: #fff;
		}
	}

	input{
		position: absolute;
		width: 40px;
		height: 20px;
		display: block;
	 	transform: translate(-50%, -50%);
	 	border: 1px solid rgba(119, 119, 119, 0.47);
		&.top{
			top: 24px;
			left: 50%;
			right: 50%;
		}
		&.right{
			right: -15px;
			top: 50%;
			bottom: auto;
		}
		&.bottom{
		    left: 50%;
		    right: 50%;
		    bottom: 0;
		}
		&.left{
			left: 24px;
			top: 50%;
			bottom: auto;
		}
	}
}
#pa-iframe-edit-module{
	width: 100%;
	min-height: 300px;
	border: none;
}
.pa-column-container > .pa-row-container > .pa-element-wrapper > .pa-row{
	margin: 0;
}
.pa-column{
	.ui-resizable-s,
	.ui-resizable-se{
		display: none;
	}
	.ui-resizable-e{
		cursor: col-resize;
		&:after {
		    content: "";
		    display: block;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    margin-top: -10px;
		    width: 4px;
		    height: 4px;
		    border-radius: 50%;
		    background: #ddd;
		    box-shadow: 0 10px 0 #ddd, 0 20px 0 #ddd;
		}
	}
}
.pa-table{
	span{
		font-size: 20px;
	}
}
.form-group{
	.desc{
		font-style: italic;
		font-size: 12px;
		color: #9E9E9E;
		margin: 5px 0;
	}
}
.datetimepicker{
	padding: 0 !important;
}
.image-select{
	label{
		position: relative;
		&:before{
			content: '';
		    position: absolute;
		    z-index: 1;
		    top: -5px;
		    left: -5px;
		    width: 100%;
		    height: 100%;
		    border: 3px solid #ddd;
		    opacity: 0;
		    box-sizing: content-box;
		    transform: scale(0.9);
		    transition: all .2s;
		    float: left;
		    padding-right: 3px;
		    padding-bottom: 3px;
		}
		&.active,
		&:hover{
			cursor: pointer;
			&:before{
			    opacity: 1;
			    border: 3px solid #abcbdd;
			    transform: scale(1);
			}
		}
	}
	img{
	    max-width: 90px;
	    position: relative;
	    z-index: 2;
	    background: #fff;
	    box-shadow: 0px 0px 1px 0 rgba(0,0,0,.15);
	}
}
.pa-image-hover{
	position: absolute;
	z-index: 9999;
	box-shadow: 0 0 3px 0 rgba(0,0,0,.15);
}
#pa-loading{
    background: rgba(0,0,0,0.75);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;

    #loading-inner{
	    display: block;
	    position: relative;
	    left: 50%;
	    top: 50%;
	    text-align: center;
	    transform: translate( -50%, -50% );
	    -moz-transform: translate( -50%, -50% );
	    -webkit-transform: translate( -50%, -50% );
	    -ms-transform: translate( -50%, -50% );
    }

    span{
    	font-size: 20px;
    	color: #fff;
    }
	#loader {
	    display: block;
	    position: relative;
	    left: 50%;
	    top: 50%;
	    border-radius: 50%;
	    border: 3px solid transparent;
	    text-align: center;
	    transform: translate( -50%, -50% );
	    -moz-transform: translate( -50%, -50% );
	    -webkit-transform: translate( -50%, -50% );
	    -ms-transform: translate( -50%, -50% );

	    &.loading{
	    	margin: -50px 0 0 -50px;
		    width: 100px;
		    height: 100px;
	    	border-top-color: #3498db;
		    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

		    &:before {
			    content: "";
			    position: absolute;
			    top: 5px;
			    left: 5px;
			    right: 5px;
			    bottom: 5px;
			    border-radius: 50%;
			    border: 3px solid transparent;
			    border-top-color: #e74c3c;

			    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
			}

			&:after {
			    content: "";
			    position: absolute;
			    top: 15px;
			    left: 15px;
			    right: 15px;
			    bottom: 15px;
			    border-radius: 50%;
			    border: 3px solid transparent;
			    border-top-color: #f9c922;

			    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
			      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
			}
	    }
	}

	@-webkit-keyframes spin {
	    0%   { 
	        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
	        -ms-transform: rotate(0deg);  /* IE 9 */
	        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	    }
	    100% {
	        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
	        -ms-transform: rotate(360deg);  /* IE 9 */
	        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	    }
	}
	@keyframes spin {
	    0%   { 
	        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
	        -ms-transform: rotate(0deg);  /* IE 9 */
	        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	    }
	    100% {
	        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
	        -ms-transform: rotate(360deg);  /* IE 9 */
	        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	    }
	}
}